<template>
  <view class="page">
	  <view class="header">
		  <fu-custom bgColor="text-white" :isBack="true" :isBottom="false">
		  	<block slot="content" style="color: #000000;">领券中心</block>
		  </fu-custom>
	  </view>
    <!-- 页面加载 loading  start -->
    <fu-loading v-if="isShowLoading"></fu-loading>
    <!-- 页面加载 loading  end -->
    <!-- 已经领取的优惠卷列表 start -->
    <view v-else>
      <view class="list">
        <!-- <JdCoupongoods :info="item" :index="index" @receive="receive(item.id, index, item.is_receive)"></JdCoupongoods> -->
        <view v-for="(item, index) in list" :key="index" style="margin-bottom: 24rpx;">
      	  <fu-coupon :discountPrice="item.money" :name="item.name" :time="item.end_time" :limit="item.min_order_money"
      	    :isUse="item.is_receive == 1" @click="receive(item.id, index, item.is_receive)" :item='item'></fu-coupon>
        </view>
      </view>
    </view>
    <!-- 已经领取的优惠卷列表 end -->
    <!-- 暂无优惠卷 start -->
    <fu-empty-ui v-if="list.length == 0 && !isShowLoading" emptyImage="coupons"></fu-empty-ui>
    <!-- 暂无优惠卷 end -->
    <!-- 网络检测 start -->
    <fu-notwork></fu-notwork>
    <!-- 网络检测 end -->
  </view>
</template>

<script>
  import JdCoupongoods from '../../components/jd-coupon-new/jd-coupon-goods.vue';
  import fuCoupon from '../../components/fu-coupon/fu-coupon.vue';
  export default {
    components: {
      fuCoupon,
      JdCoupongoods
    },
    data() {
      return {
        isShowLoading: true, //是否显示页面加载
        list: [] //已经领取的优惠卷列表
      };
    },
    /**
     * @description  页面初始化加载优惠卷列表
     */
    onLoad() {
      this.setNavigationBarTitle(this.i18n['领取优惠券'])
      this.get_coupon_type_list();
    },
    methods: {
      /**
       * @description 获取已经领取的优惠卷列表
       * @param {Object} value true/false 是否显示页面loading
       */
      get_coupon_type_list(value) {
        var user = uni.getStorageSync('USER_INFO');
        var data = {};
        data.method = 2;
        if (user.id > 0) {
          data.user_id = user.id;
        }
        if (!value) {
          this.isShowLoading = true;
        }
        this.$api
          .get(global.apiUrls.getCouponList, data)
          .then(res => {
            this.isShowLoading = false;
            if (res.data.code == 1) {
              res.data.data.forEach(item => {
                item.share = false;
              });
              this.list = res.data.data;
            }
            uni.stopPullDownRefresh();
          })
          .catch(err => {
            this.isShowLoading = false;
          });
      },
      /**
       * @description 领取优惠卷
       * @param {Object} cid  优惠卷id
       * @param {Object} index  优惠卷序号
       * @param {Object} is_receive  判断是否已经领取优惠卷
       */
      receive(cid, index, is_receive) {
        // 前端判断已领取得点击失效
        if (is_receive == 1) {
          return false;
        }
        this.$api
          .post(global.apiUrls.postReceiveCoupon, {
            cid: cid
          })
          .then(res => {
            this.$message.info(res.data.msg);
            if (res.data.code == 1) {
              this.list[index].is_receive = 1;
            }
          });
      }
    },
    /**
     * @description 下拉刷新
     */
    onPullDownRefresh() {
      this.get_coupon_type_list(true);
    }
  };
</script>

<style lang="scss" scoped>
.header {
	width: 100%;
	height: 386rpx;
	background:linear-gradient(#FFDCE4, #ffffff);;
}
.list {
	padding: 0 32rpx;
	margin-top: -20rpx;
}
</style>
